<template>
  <div class="app-container">
    <div class="col-cent">
      <div class="soos-her">
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
          <el-form-item label="车辆类型" prop="type">
            <el-select v-model="queryParams.type" placeholder="请选择车辆类型" clearable size="small" style="width: 150px;">
              <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="号牌" prop="vin">
            <el-input v-model="queryParams.vin" placeholder="请输入车牌号" clearable size="small" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
              <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="出车时间" prop="lastDispatchTime" size="small" label-width="150px;">
            <el-date-picker type="daterange" v-model="lastDispatchTime" format="yyyy-MM-dd" size="small" value-format="yyyy-MM-dd"
              start-placeholder="开始日期" end-placeholder="结束日期" @change="handleChangeTime" range-separator="至" clearable></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['manager:car:add']">
            新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button v-hasPermi="['manager:car:edit']" type="success" icon="el-icon-edit" size="mini" :disabled="single"
            @click="handleUpdate">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button v-hasPermi="['manager:car:remove']" type="danger" icon="el-icon-delete" size="mini" :disabled="multiple"
            @click="handleDelete">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" size="mini" @click="handelSkip">宏电管理平台</el-button>
        </el-col>
        <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['manager:car:export']"
        >导出</el-button>
      </el-col>-->
      </el-row>
      <el-table v-loading="loading" :data="carList" @selection-change="handleSelectionChange" height="64vh">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="车辆状态" align="center" prop="status" :formatter="statusFormat" />

        <el-table-column label="车辆类型" align="center" prop="type" :formatter="typeFormat" />
        <el-table-column label="车牌号" align="center" prop="vin" />
        <!-- <el-table-column label="宏电是否在线" align="center" prop="online" /> -->
        <el-table-column label="最后出车时间" align="center" prop="lastDispatchTime" width="180">
          <template slot-scope="scope">
            <span>{{
              parseTime(scope.row.lastDispatchTime, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最后出车司机" align="center" prop="lastDispatchDriverName" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" @click="handleUpdate(scope.row)">查看</el-button>
            <!-- <el-button
              v-hasPermi="['manager:car:edit']"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改</el-button>
            <el-button
              v-hasPermi="['manager:car:remove']"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />

      <!-- 车辆详情  弹窗 -->
      <el-dialog :title="editWindows ? '车辆编辑' : '车辆详情'" :visible.sync="open" width="90%" :before-close="handleDialogClose"
        append-to-body @close="carcancle">
        <div v-show="editWindows" class="wind-form-socu">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <!--<el-form-item label="医院标识" prop="uid">
                   <el-input v-model="form.uid" placeholder="请输入医院标识" />
                 </el-form-item>-->
            <el-form-item label="车辆图片" prop="image">
              <el-upload ref="image" :file-list="form.fieldfileList" :action="imageAction" :before-upload="field105BeforeUpload"
                :headers="headers" :on-success="quillImgSuccess" :on-remove="removeFormImage" list-type="picture-card"
                accept="image/*">
                <i class="el-icon-plus" />
                <div slot="tip" class="el-upload__tip">
                  只能上传不超过 5MB 的image/*文件
                </div>
                <!-- <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button> -->
              </el-upload>
            </el-form-item>
            <el-form-item label="车辆类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择车辆类型">
                <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="parseInt(dict.dictValue)" />
              </el-select>
            </el-form-item>

            <el-form-item label="车牌号" prop="vin">
              <el-input v-model="form.vin" placeholder="请输入车牌号" />
            </el-form-item>
            <el-form-item label="超声房间号" prop="ultrasonicRoom" label-width="85px">
              <el-input v-model="form.ultrasonicRoom" placeholder="请输入超声房间号(飞利浦)" />
            </el-form-item>

            <el-form-item label="网关标识" prop="gatwayId" label-width="85px">
              <el-input v-model="form.gatwayId" placeholder="请输入网关标识" />
            </el-form-item>
          </el-form>
        </div>
        <div class="col-wep-tac">
          <div class="teb-cen" v-show="!editWindows">
            <div class="left-img">
              <div class="upl-comk-mig">
                <ul class="el-upload-list el-upload-list--picture-card">
                  <li tabindex="0" class="el-upload-list__item is-success">
                    <img :src="form.image" class="el-upload-list__item-thumbnail" />
                  </li>
                </ul>
              </div>
            </div>
            <div class="right-text">
              <div class="top-text">
                <div class="ul">
                  <div class="name">车牌号码：</div>
                  <div class="name-value">{{ form.vin }}</div>
                </div>
                <div class="ul">
                  <div class="name">车辆状态：</div>
                  <div class="name-value">{{ statusFormat(form) }}</div>
                </div>
                <div class="ul">
                  <div class="name">车辆类型：</div>
                  <div class="name-value">{{ typeFormat(form) }}</div>
                </div>
                <div class="ul">
                  <div class="name">上次出车司机：</div>
                  <div class="name-value">
                    {{
                      form.lastDispatchDriverName == undefined
                        ? "暂无"
                        : form.lastDispatchDriverName
                    }}
                  </div>
                </div>
                <div class="ul">
                  <div class="name">上次出车时间：</div>
                  <div class="name-value">
                    {{
                      form.lastDispatchTime == undefined
                        ? "暂无"
                        : form.lastDispatchTime
                    }}
                  </div>
                </div>
              </div>
              <div class="conte-text">
                <div class="ul">
                  <div class="name">车载设备数据（最后一次回传数据）</div>
                  <div class="name-value"></div>
                </div>
                <div class="ul">
                  <div class="name">回传时间：</div>
                  <div class="name-value">
                    {{
                      form.callbackTime == undefined
                        ? "暂无"
                        : form.callbackTime
                    }}
                  </div>
                </div>
                <div class="ul">
                  <div class="name">油量：</div>
                  <div class="name-value">
                    {{ form.pressure == undefined ? "0" : form.pressure }}L
                  </div>
                </div>
                <div class="ul">
                  <div class="name">里程：</div>
                  <div class="name-value">
                    {{ form.oxygen == undefined ? "0" : form.oxygen }}KM
                  </div>
                </div>
              </div>
            </div>

            <el-col :span="2" style="float: right; margin-bottom: 10px;">
              <el-button @click="handlestop" type="danger" round v-show="form.status == 0" :disabled="form.status == 3">报停</el-button>
              <el-button @click="handlestart(form)" type="danger" round v-show="form.status == 3">恢复</el-button>
            </el-col>
            <el-col :span="2" style="float: right;">
              <el-button icon="el-icon-edit" @click="handlechanges" round>编辑</el-button>
            </el-col>
          </div>
          <div class="teb-bom" v-show="tableShow">
            <div class="tab-tsp">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="设备数据" name="equipment">
                  <el-table v-loading="loading" :data="carDeviceList" @selection-change="handleSelectionChange">
                    <el-table-column label="设备序列号" align="center" prop="serial" />

                    <el-table-column label="状态" align="center" prop="status" :formatter="commonStatusFormat" />

                    <el-table-column label="设备类型" align="center" prop="type" :formatter="deviceTypeFormat" />
                    <el-table-column label="厂商品牌" align="center" prop="vender" />
                    <el-table-column label="设备型号" align="center" prop="model" />
                    <el-table-column label="最后数据传输时间" align="center" prop="lastDispatchTime" width="180">
                      <template slot-scope="scope">
                        <span>{{
                          parseTime(
                            scope.row.lastTransferTime,
                            "{y}-{m}-{d} {h}:{i}:{s}") == undefined
                            ? "暂无"
                            : parseTime(
                                scope.row.lastTransferTime,
                                "{y}-{m}-{d} {h}:{i}:{s}"
                              )
                        }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="出车记录" name="record">
                  <el-table v-loading="loading" :data="dispatchList" @selection-change="handleSelectionChange">
                    <el-table-column label="调度流水号" align="center" prop="flow" :show-overflow-tooltip="true" />

                    <el-table-column label="出车时间" align="center" prop="leaveHospTime" width="180">
                      <template slot-scope="scope">
                        <span>{{
                          parseTime(
                            scope.row.leaveHospTime,
                            "{y}-{m}-{d} {h}:{i}:{s}"
                          ) == undefined
                            ? "暂无"
                            : parseTime(
                                scope.row.leaveHospTime,
                                "{y}-{m}-{d} {h}:{i}:{s}"
                              )
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="到达医院时间" align="center" prop="leaveHospTime" width="180">
                      <template slot-scope="scope">
                        <span>{{
                          parseTime(
                            scope.row.arriveHostTime,
                            "{y}-{m}-{d} {h}:{i}:{s}"
                          ) == undefined
                            ? "暂无"
                            : parseTime(
                                scope.row.arriveHostTime,
                                "{y}-{m}-{d} {h}:{i}:{s}"
                              )
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="司机" align="center" prop="driverName" />
                    <el-table-column label="接车地点" align="center" prop="patientLocal" />
                    <el-table-column label="收治医院" align="center" prop="hospital" />
                    <el-table-column label="病人病历" width="120">
                      <template slot-scope="scope">
                        <router-link :to="
                            '/dispathCase/dispatchCase?dispatchCaseID=' + scope.row.dispatchCaseID">
                          <el-button @click="open = false" type="text" size="small">
                            {{ scope.row.patientName }}
                          </el-button>
                        </router-link>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
          <!-- <el-button type="primary" v-show="editWindows" @click="submitForm">确 定</el-button> -->

          <div v-show="editWindows">
            <el-button round @click="handlechange">取消</el-button>
            <el-button type="primary" round @click="submitForm">保存</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 车辆报停 -->
      <el-dialog title="车辆报停" :visible.sync="carStopStatus" :before-close="cancels" width="600px" append-to-body>
        <div class="stop-text">
          <el-row>
            <el-col :span="12">
              <div class="stop-ul">
                <div class="name">车牌号码：</div>
                <div class="name-value" style="color: #1890FF;">
                  {{ form.vin }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="stop-ul">
                <div class="name">当前状态：</div>
                <div class="name-value" style="color: #13CE66;">
                  {{ statusFormat(form) }}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="报停原因" prop="scramReason" label-width="85px">
            <el-input v-model="form.scramReason" placeholder="请输入报停原因" type="textarea" :maxlength="100" show-word-limit
              :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button type="primary" @click="submitFormStop">确 定 报 停</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    listCar,
    getCar,
    delCar,
    addCar,
    updateCar,
    exportCar,
    getHdWebUrl
  } from "@/api/biz/car";
  import {
    listCarDevice
  } from "@/api/biz/carDevice";
  import {
    getToken
  } from "@/utils/auth";
  import {
    listDispatch
  } from "@/api/biz/dispatch";
  export default {
    name: "Car",
    data() {
      return {
        tableShow: true,
        editStatus: false,
        imageAction: process.env.VUE_APP_BASE_API + "/common/upload",
        headers: {
          Authorization: "Bearer " + getToken()
        },
        editWindows: false,
        // 禁用表单
        forbidden: true,
        carStopStatus: false,
        // 最后出车时间
        lastDispatchTime: [],
        // 车载设备数据
        carDeviceList: [],
        // 调度记录
        dispatchList: [],
        commonStatusOptions: [],
        deviceTypeOptions: [],
        // 车辆类型字典
        typeOptions: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 车辆管理表格数据
        carList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 编辑 弹窗
        editOpen: false,
        // 车辆类型字典
        typeOptions: [],
        // 状态字典
        statusOptions: [],
        // 宏电是否启用车辆字典
        enableVehicleOptions: [],
        // 宏电是否在线字典
        onlineOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          carID: undefined,
          vin: undefined,
          lastDispatchTime: undefined,
          endLastDispatchTime: undefined,
          status: undefined
        },
        // 查询参数
        queryParam: {
          pageNum: 1,
          pageSize: 10,
          vin: undefined
        },
        // 表单参数
        form: {
          fieldfileList: [],
          type: "0"
        },
        activeName: "equipment",
        Vehiclestatus: true,
        carLists: [],
        // 表单校验
        rules: {
          carID: [{
            required: true,
            message: "车辆ID不能为空",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "车辆类型不能为空",
            trigger: "blur"
          }],
          vin: [{
            required: true,
            message: "车牌号不能为空",
            trigger: "blur"
          }],
          image: [{
            required: true,
            message: "车辆图片不能为空",
            trigger: "blur"
          }],
          status: [{
            required: true,
            message: "状态不能为空",
            trigger: "blur"
          }]
        },

        carID: undefined
      };
    },
    created() {
      this.getList();
      this.getDicts("car_type").then(response => {
        this.typeOptions = response.data;
      });
      this.getDicts("car_status").then(response => {
        this.statusOptions = response.data;
      });
      this.getDicts("hongdian_status").then(response => {
        this.enableVehicleOptions = response.data;
      });
      this.getDicts("online").then(response => {
        this.onlineOptions = response.data;
      });
      this.getDicts("common_status").then(response => {
        this.commonStatusOptions = response.data;
      });
      this.getDicts("car_deviceType").then(response => {
        this.deviceTypeOptions = response.data;
      });
    },

    mounted: function () {
      this.carID = this.$route.query.carID;

      if (this.carID) {
        this.handleUpdatebyK(this.carID);
      }
    },

    watch: {
      $route(){
        this.carID = this.$route.query.carID;
      },
      carID() {
        if (this.carID) {
          this.handleUpdatebyK(this.carID)
        }
      },
      open() {
        if (this.open == false) {
          this.$router.push("/ambu/car")
        }
      }
    },

    methods: {
      // 时间查询方法
      handleChangeTime() {
        this.queryParams.lastDispatchTime = this.lastDispatchTime[0];
        this.queryParams.endLastDispatchTime = this.lastDispatchTime[1];
      },
      handlechange() {
        this.editWindows = !this.editWindows;
        this.open = false;
      },
      handlechanges(){
        this.editWindows = !this.editWindows;
      },
      /** 查询车辆管理列表 */
      getList() {
        this.loading = true;
        listCar(this.queryParams).then(response => {
          this.carList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 图片校验
      field105BeforeUpload(file) {
        const isRightSize = file.size / 1024 / 1024 < 5;
        if (!isRightSize) {
          this.$message.error("文件大小超过 5MB");
        }
        const isAccept = new RegExp("image/*").test(file.type);
        if (!isAccept) {
          this.$message.error("应该选择image/*类型的文件");
        }
        return isRightSize && isAccept;
      },
      deviceTypeFormat(row, column) {
        return this.selectDictLabel(this.deviceTypeOptions, row.type);
      },
      // 状态字典翻译
      commonStatusFormat(row, column) {
        return this.selectDictLabel(this.commonStatusOptions, row.status);
      },
      // 车辆类型字典翻译
      typeFormat(row, column) {
        return this.selectDictLabel(this.typeOptions, row.type);
      },
      // 状态字典翻译
      statusFormat(row, column) {
        return this.selectDictLabel(this.statusOptions, row.status);
      },
      // 宏电是否启用车辆字典翻译
      enableVehicleFormat(row, column) {
        return this.selectDictLabel(this.enableVehicleOptions, row.enableVehicle);
      },
      // 宏电是否在线字典翻译
      onlineFormat(row, column) {
        return this.selectDictLabel(this.onlineOptions, row.online);
      },
      // 图片上传成功处理
      quillImgSuccess(res, file) {
        // res为图片服务器返回的数据
        // 如果上传成功
        if (res.code === 200) {
          // 获取光标所在位置xx
          this.form.image = res.fileName;
          // this.fieldfileList.push(res.url)
          this.$message.success("上传成功");
        } else {
          this.$message.error("图片插入失败");
        }
      },
      // 删除图片操作
      removeFormImage(row) {
        this.form.image = null;
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.editWindows = false;
        this.reset();
      },
      cancels() {
        this.carStopStatus = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          carID: undefined,
          uid: undefined,
          type: undefined,
          vin: undefined,
          remark: undefined,
          lastTime: undefined,
          depart: undefined,
          lastDispatchDriverName: undefined,
          lastDispatchTime: undefined,
          lastDispatchDriverID: undefined,
          speed: undefined,
          pressure: undefined,
          oxygen: undefined,
          carGps: undefined,
          alarm: undefined,
          status: undefined,
          id: undefined,
          departId: undefined,
          departName: undefined,
          termSn: undefined,
          expireDate: undefined,
          registerDate: undefined,
          modifyDate: undefined,
          enableVehicle: undefined,
          online: undefined,
          fieldfileList: [],
          image: null
        };
        this.lastDispatchTime = [];
        this.resetForm("form");
      },


      carcancle(){
        this.open = false;
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.endLastDispatchTime = undefined;
        this.lastDispatchTime = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.carID);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加车辆管理";
        this.editWindows = true;
        this.tableShow = false;
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const carID = row.carID || this.ids;
        getCar(carID).then(response => {
          this.form = response.data;
          const images = [];
          if (response.data.image !== null) {
            images.push({
              name: "",
              url: process.env.VUE_APP_BASE_API + response.data.image
            });
          }

          this.form.fieldfileList = images;
          this.form.image = process.env.VUE_APP_BASE_API + response.data.image;
          this.tableShow = true;
          this.editStatus = true;
          this.open = true;
          this.title = "修改车辆管理";
        });
        let carDeviceQueryParams = {
          carID: carID
        };
        listCarDevice(carDeviceQueryParams).then(response => {
          this.carDeviceList = response.rows;
        });
        listDispatch(carDeviceQueryParams).then(response => {
          this.dispatchList = response.rows;
        });
        this.queryParam.vin = row.vin;
        listCar(this.queryParam).then(response => {
          this.carLists = response.rows;
        });
      },



      handleUpdatebyK(carID) {
        this.reset();
        getCar(carID).then(response => {
          this.form = response.data;
          const images = [];
          if (response.data.image !== null) {
            images.push({
              name: "",
              url: process.env.VUE_APP_BASE_API + response.data.image
            });
          }

          this.form.fieldfileList = images;
          this.form.image = process.env.VUE_APP_BASE_API + response.data.image;
          this.tableShow = true;
          this.editStatus = true;
          this.open = true;
          this.title = "修改车辆管理";
        });
        let carDeviceQueryParams = {
          carID: carID
        };
        listCarDevice(carDeviceQueryParams).then(response => {
          this.carDeviceList = response.rows;
        });
        listDispatch(carDeviceQueryParams).then(response => {
          this.dispatchList = response.rows;
        });
        this.queryParam.vin = row.vin;
        listCar(this.queryParam).then(response => {
          this.carLists = response.rows;
        });
      },


      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.carID !== undefined) {
              updateCar(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else {
              addCar(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
            this.editWindows = false;
          }
        });
      },
      //报停方式
      submitFormStop: function() {
        if (this.form.scramReason == undefined) {
          this.msgError("报停原因不能为空");
          return;
        }
        this.form.status = 3;
        updateCar(this.form).then(response => {
          if (response.code === 200) {
            this.msgSuccess("报停成功");
            this.open = false;
            this.editWindows = false;
            this.carStopStatus = false;
            this.getList();
          } else {
            this.msgError(response.msg);
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const carIDs = row.carID || this.ids;
        this.$confirm(
            '是否确认删除车辆管理编号为"' + carIDs + '"的数据项?',
            "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
          .then(function() {
            return delCar(carIDs);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          })
          .catch(function() {});
      },
      handleDialogClose() {
        this.open = false;
        this.editWindows = false;
      },
      // 跳转方法
      handelSkip() {
        getHdWebUrl().then(response => {
          console.log(response);
          // this.typeOptions = response.data
          window.open(response.msg, "_blank");
        });
      },
      //标签切换
      handleClick(tab, event) {},
      // 报停窗口
      handlestop() {
        this.carStopStatus = true;
      },
      handlestart(form){
        let that = this;
        this.$confirm("是否确认恢复车牌号为" +  this.form.vin  + "的车辆?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(function() {
            form.status = 0
            updateCar(form).then(response => {
            if (response.code == 200) {
              that.msgSuccess("恢复报停成功");
              that.open = false;
              that.editWindows = false;
              that.carStopStatus = false;
              that.getList();
            } else {
              that.msgError(response.msg);
            }
          })
          })
      }
    }
  };
</script>
<style>
  .el-dialog {
    margin-bottom: 40px;
  }
</style>
<style lang="scss" scoped>
  .app-container {
    padding: 10px;
  }

  .col-cent {
    background: #fff;
    /* padding:20px; */
  }

  .col-cent .mb8 {
    margin-bottom: 20px;
    padding-left: 15px;
  }

  .col-cent .soos-her {
    width: 100%;
    padding: 20px 10px;
  }

  .col-cent .soos-her .el-form .el-form-item {
    margin-bottom: 0px;
  }

  .col-cent .soos-her .el-input--small {
    width: 125px;
  }

  .col-cent .soos-her .el-input__inner {
    width: 240px;
  }

  .col-cent .soos-her .el-select--small {
    width: 130px;
  }

  .pagination-container {
    height: 70px;
  }

  .blue {
    color: #3e95f0;
  }

  .violet {
    color: #7314d7;
  }

  .red {
    color: #cd0000;
  }
</style>
<style>
  .col-wep-tac {
    padding: 0px;
  }

  .col-wep-tac .teb-cen {
    float: left;
    width: 100%;
    height: auto;
  }

  .col-wep-tac .teb-cen .left-img {
    float: left;
    width: 340px;
    height: 240px;
    overflow: hidden;
  }

  .col-wep-tac .teb-cen .left-img .upl-comk-mig .el-upload--picture-card {
    width: 100%;
    height: 240px;
  }

  .col-wep-tac .teb-cen .left-img .upl-comk-mig .el-upload-list--picture-card .el-upload-list__item {
    width: 100%;
    height: 240px;
  }

  .col-wep-tac .teb-cen .left-img .el-icon-plus {
    margin-top: 100px;
  }

  .col-wep-tac .teb-cen .right-text {
    float: left;
    width: 590px;
    height: auto;
    /* margin-left: 20px; */
  }

  .col-wep-tac .teb-cen .right-text .top-text {
    float: left;
  }

  .col-wep-tac .teb-cen .right-text .top-text .ul {
    float: left;
    font-size: 14px;
    margin-bottom: 20px;
    margin-left: 30px;
    margin-right: 40px;
  }

  .col-wep-tac .teb-cen .right-text .top-text .ul .name {
    float: left;
  }

  .col-wep-tac .teb-cen .right-text .top-text .ul .name-value {
    float: left;
    color: #3e95f0;
  }

  .col-wep-tac .teb-cen .right-text .top-text .ul .name-value .el-input--mini {
    margin-top: -14px;
    width: 90px;
  }

  /* .col-wep-tac .teb-cen .right-text .top-text .ul .name-value .el-switch__label{
  font-weight:400;
  margin-top: -5px;
}
.col-wep-tac .teb-cen .right-text .top-text .ul .name-value .el-switch.is-checked .el-switch__core{
  margin-top: -5px;
}
.col-wep-tac .teb-cen .right-text .top-text .ul .name-value .el-switch__core{
  margin-top: -5px;
} */
  .col-wep-tac .teb-cen .right-text .conte-text {
    float: left;
    width: 100%;
    background-color: #f9f9f9;
    margin-left: 30px;
    padding: 10px;
  }

  .col-wep-tac .teb-cen .right-text .conte-text .ul {
    float: left;
    width: 100%;
    font-size: 14px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .col-wep-tac .teb-cen .right-text .conte-text .ul .name {
    float: left;
  }

  .col-wep-tac .teb-cen .right-text .conte-text .ul .name-value {
    float: left;
    color: #3e95f0;
  }

  .col-wep-tac .teb-bom {
    float: left;
    width: 100%;
    height: auto;
    padding: 20px 0px;
  }

  .col-wep-tac .teb-bom .tab-tsp {
    float: left;
    width: 100%;
  }

  .btn-edit-text-right {
    position: absolute;
    top: 15px;
    right: 90px;
    cursor: pointer;
  }

  .btn-edit-text-right:hover {
    color: #3e95f0;
  }

  .el-tabs__nav-wrap::after {
    height: 0px;
  }

  .wind-form-socu {}

  .wind-form-socu .el-form-item__content .el-input {
    width: 300px;
  }

  .el-dialog__body {
    overflow: hidden;
  }

  .stop-ul .name {
    float: left;
  }

  .stop-text {
    padding-bottom: 30px;
    margin-left: 15px;
  }
</style>
